<template>
  <div class="chat-container">
    <div class="chat-header">
      <h1>DeepSeek Chat</h1>
    </div>
    
    <div class="chat-messages" ref="messagesContainer">
      <div v-for="(message, index) in messages" 
           :key="index" 
           :class="['message-wrapper', message.role === 'user' ? 'user-message' : 'bot-message']">
        <div class="message-time">{{ formatTime(message.time || new Date()) }}</div>
        <div class="message-content">
          <div class="text">{{ message.content }}</div>
        </div>
      </div>
      <div v-if="loading" class="message bot-message">
        <div class="typing-indicator">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
    
    <div class="chat-input-container">
      <div class="input-wrapper">
        <input 
          type="text" 
          v-model="userInput" 
          @keyup.enter="sendMessage"
          placeholder="输入您的问题..."
          class="chat-input"
        >
      </div>
      <button @click="sendMessage" class="send-button">发送</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import axios from 'axios';
import { marked } from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

// 配置 marked
marked.setOptions({
  highlight: function(code, lang) {
    if (lang && hljs.getLanguage(lang)) {
      return hljs.highlight(code, { language: lang }).value;
    }
    return hljs.highlightAuto(code).value;
  },
  breaks: true
});

const messages = ref([]);
const userInput = ref('');
const loading = ref(false);
const messagesContainer = ref(null);

// 格式化消息内容（支持 Markdown）
const formatMessage = (content) => {
  return marked(content);
};

// 格式化时间
const formatTime = (date) => {
  return new Date(date).toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 滚动到底部
const scrollToBottom = async () => {
  await nextTick();
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
  }
};

// 发送消息
const sendMessage = async () => {
  const message = userInput.value.trim();
  if (!message || loading.value) return;

  // 添加用户消息
  messages.value.push({
    role: 'user',
    content: message,
    time: new Date()
  });
  
  userInput.value = '';
  loading.value = true;
  await scrollToBottom();

  try {
    const response = await axios.post('http://localhost:3000/api/chat', {
      message
    });

    if (response.data.success) {
      messages.value.push({
        role: 'assistant',
        content: response.data.message,
        time: new Date()
      });
    } else {
      throw new Error(response.data.error);
    }
  } catch (error) {
    messages.value.push({
      role: 'assistant',
      content: '抱歉，发生了错误：' + error.message,
      time: new Date()
    });
  } finally {
    loading.value = false;
    await scrollToBottom();
  }
};

onMounted(() => {
  // 可以在这里添加欢迎消息
  messages.value.push({
    role: 'assistant',
    content: '你好！我是 DeepSeek AI 助手，有什么可以帮你的吗？',
    time: new Date()
  });
});
</script>

<style scoped>
.chat-container {
  max-width: 800px;
  margin: 40px auto;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 添加背景图 */
:deep(.app-container) {
  background: 
    linear-gradient(rgba(240, 242, 245, 0.8), rgba(240, 242, 245, 0.8)),
    url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop') center/cover fixed;
  min-height: 100vh;
  padding: 20px;
}

.chat-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.chat-header h1 {
  margin: 0;
  font-size: 24px;
  color: #333;
  font-weight: 500;
}

.chat-messages {
  height: 500px;
  padding: 20px;
  overflow-y: auto;
}

.message-wrapper {
  margin-bottom: 28px;
  max-width: 70%;
  position: relative;
}

.message-wrapper:last-child {
  margin-bottom: 10px;
}

.message-time {
  font-size: 12px;
  color: #999;
  margin-bottom: 6px;
  font-weight: 400;
}

.user-message {
  margin-left: auto;
}

.user-message .message-time {
  text-align: right;
  padding-right: 4px;
}

.message-content {
  padding: 12px 16px;
  border-radius: 12px;
  word-break: break-word;
  line-height: 1.6;
  position: relative;
}

.message-content .text {
  font-size: 14px;
  letter-spacing: 0.3px;
}

.user-message .message-content {
  background-color: #007AFF;
  color: white;
  border-top-right-radius: 4px;
}

.bot-message .message-content {
  background-color: #f0f0f0;
  color: #333;
  border-top-left-radius: 4px;
}

.bot-message .text {
  color: #2c2c2c;
  font-weight: 400;
}

.chat-input-container {
  padding: 16px 20px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 12px;
  background-color: #fff;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.input-wrapper {
  flex: 1;
  background: #f5f5f5;
  border-radius: 24px;
  padding: 4px;
  transition: background-color 0.2s;
}

.input-wrapper:focus-within {
  background-color: #f0f0f0;
}

.chat-input {
  width: 100%;
  padding: 10px 18px;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
  color: #333;
  line-height: 1.4;
}

.chat-input::placeholder {
  color: #999;
}

.send-button {
  padding: 0 24px;
  background-color: #007AFF;
  color: white;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  height: 42px;
}

.send-button:hover {
  background-color: #0056b3;
  transform: translateY(-1px);
}

.send-button:active {
  transform: translateY(0);
}

/* 滚动条样式 */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 5px 10px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background-color: #90949c;
  border-radius: 50%;
  animation: bounce 1.3s ease infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }

@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

:deep(.message-content) {
  line-height: 1.5;
}

:deep(.message-content pre) {
  background: #f4f4f4;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
}

:deep(.message-content code) {
  font-family: monospace;
}

:deep(.bot-message .message-content) {
  color: #333;
}
</style> 